<template>
    <section class="chore_detail_zuhe">
        <div id="main">
 			<div id="mainContainer"  @drop='drop($event)' @dragover='allowDrop($event)'>
 				<p class="chore_detail_p">编辑区</p>
 				<echart-pie @clickEcharts="clickEcharts" :className="serverQuarceClassName"  :diyOption="optionDiy" :idName="serverQuarceId"></echart-pie>
 			</div>
		</div>
		<div id="left">
		 	<div id="leftContainer" class="inner">
		 		<p class="chore_detail_p">可合并的服务资源</p>
		 		<div class="service_item mainContainer_hidden" 
		 			v-for="(item,index) in dragItem"
		 			draggable='true' 
		 			@dragstart='drag($event,item,index)' >
 					{{item.name}}
 				</div>
		 	</div>
		</div>
		<div id="right">
			<div id="rightContainer" class="inner">
				<p class="chore_detail_p">参数设置</p>
				<div class="chore_detail_div">
					<p class="chore_detail_title">输入参数</p>
					<p class="chore_input_p" v-for="item in choreInputp">
						<span class="chore_detail_span">参数名：<span class="chore_detail_val">{{item.name}}</span></span><span class="chore_detail_span">对应元数据：<span class="chore_detail_val">{{item.metaDataId}}</span></span></span>
					</p>
					
					<p class="chore_detail_title" style="margin-top: 20px;">输出参数(请选择)</p>
				
				<el-checkbox-group v-model="form.outputs" class="checkbox_diy" @change="chooseOutput">
					<el-checkbox-button class="box_checkbox"  :checked="week.show" v-for="week in outputs" :label="week" :key="week.id">{{week.name}}</el-checkbox-button>
				</el-checkbox-group>
					
						<p class="title">合并字段</p>
						<el-table
							:data="OutPutTableData"
							style="width: 100%;"
						>
						<el-table-column
						       	align="center"
						       	label="类型"
						       	>
						      <template slot-scope="scope">
						      		<span v-if="scope.row.type==1">单一字段</span>
						      		<span v-if="scope.row.type==2">组合字段</span>
						      </template>
						</el-table-column>
						
						<el-table-column
						       	align="center"
						       	label="参数名"
						       	>
						      <template slot-scope="scope">
						      	<el-tooltip class="item" effect="light" content="只能英文或者下划线" placement="top-start">
						      	 <el-input v-model="scope.row.name" placeholder=""></el-input>
						      	</el-tooltip>
						      </template>
						</el-table-column>	
						
						<el-table-column
						       	align="center"
						       	label="参数值"
						       	>
						      <template slot-scope="scope">
						      		 <span>{{scope.row.mentname}}</span>
						      	
						      </template>
						</el-table-column>	
						</el-table>
	<!--*********************************************************************************************************-->				
						<p class="title">合并字段</p>
						<el-table
							:data="OutPutTableDataZuhe"
							style="width: 100%;"
						>
						<el-table-column
						       	align="center"
						       	label="类型"
						       	>
						      <template slot-scope="scope">
						      		<span v-if="scope.row.type==1">单一字段</span>
						      		<span v-if="scope.row.type==2">组合字段</span>
						      </template>
						</el-table-column>
						
						<el-table-column
						       	align="center"
						       	label="参数名"
						       	>
						      <template slot-scope="scope">
						      	<el-tooltip class="item" effect="light" content="只能英文或者下划线" placement="top-start">
						      	 <el-input v-model="scope.row.name" placeholder=""></el-input>
						      	</el-tooltip>
						      </template>
						</el-table-column>	
						
						<el-table-column
						       	align="center"
						       	label="参数值"
						       	>
						      <template slot-scope="scope">
						      		 <span>{{scope.row.mentname}}</span>
						      </template>
						</el-table-column>	
						</el-table>
						
						
						
						<span class="add_out_put" @click="edit" >添加合并字段</span>
				</div>
			</div>
		</div>
		
		<p class="step_p"> 
			<el-button type="warning" style="float: left;" @click="resetData">重置数据</el-button>
			<el-button type="primary"  style=" background-color: #2576C5;" @click="lastStep(0)" class="button_diy">上一步</el-button>
			<el-button type="primary" style=" background-color: #2576C5;" @click="nextStep(2)" class="button_diy">下一步</el-button>
			
		</p>
		
		<el-dialog
              title="添加合并字段"
              :visible.sync="dialogVisible1"
              v-if="dialogVisible1"
              width="50%"
              class="diy-dialog"
              :append-to-body="true"
            >
            <chore-detail-zuhe-form
            	:outputs = "outputs"
            	@submitZuheForm = "submitZuheForm"
            ></chore-detail-zuhe-form>
            </el-dialog>
		
    </section>
</template>

<script>
    import echartPie from "@/views/areaResource/components/echartPie"
    import choreDetailZuheForm from "./choreDetailZuheForm"
    import {
    	computedGroupSearch2,
    	computedDataSearch
    } from '../../css_js_img/computedSmartResource'
    export default {
    	props:{
    		lastForm:Object,
    		choreDetailForm2:Object
    	},
    	components:{
    		echartPie,
    		choreDetailZuheForm
    	},
        data() {
          return {
          		dom:'',
          		item:{},
          		index:0,
          		indexY:0,
          		type:"zuhe",
          		dialogVisible1:false,
          		serverQuarceClassName:"echart_graph",
          		serverQuarceId:'www',
          		hasYuanData:[],
          		hasOutPut:[],
          		length:0,
          		form:{
          			output:[],
          			outputs:[],
          		},
          		OutPutTableData:[],/*单一字段*/
          		OutPutTableDataZuhe:[],/*组合字段*/
          		dragItem:[
          			
          		],
          		outputs:[],
          		serviceItem:[
          			
          		],
          		choreInputp:[
          			
          		],
          		optionDiy : {
				    color: ['#096DD9'],
				    series: [{
				        type: 'graph',
				        // layout: 'force',
				        label: {
				            normal: {
				                show: true
				            }
				        },
				   
				        data: [
				            // root
				             {
				                name: '输入',
				                x:  0,
				                y: 50 ,
				                value: 12,
				                category: 1,
				                symbol: 'roundRect',
				                symbolSize: [60, 20]
				            },
				            {
				                name: '输出',
				                x: 400,
				                y: 50 ,
				                value: 12,
				                category: 1,
				                symbol: 'roundRect',
				                symbolSize: [60, 20]
				            },
				        ],
				        // lineStyle: curveness1,
				        links: [
				           
				        ]
				    }]
				},
          		
          };
        },
        methods: {
        		lastStep(val){
        			this.$emit('nextStep',{val:0,form:[]});
        		},
        		edit(scope){
        			this.dialogVisible1 = true;
        		},
        		delFormData1(scope){
        			this.OutPutTableData.splice(scope.$index,1);
        		},
      
        		nextStep(val){
        			this.form.serviceItem = this.serviceItem;
        			this.form.output = this.OutPutTableData.concat(this.OutPutTableDataZuhe);
        			this.$emit('nextStep',{val:2,form:this.form})
        		},
		        drag(ev,item,index){/*拖拽*/
		        	this.dom = ev.currentTarget
		        	this.item = item;
		        	this.index = index;
		        },
		        drop(ev){/*放下*/
		        	 ev.preventDefault();
		        	this.serviceItem.push(this.item);
		        	 this.dragItem.splice(this.index,1);
		        	 this.optionDiy.series[0].data.push(
		        	 	{
				                name: this.item.name,
				                x: 200,
				                y: (this.indexY++)*50,
				                value: this.item.id,
				                symbol: 'roundRect',
				                symbolSize: [120, 30],
				        },
		        	 )
		        	 this.optionDiy.series[0].links.push(
		        	 	{
			                source: 0,
			                target: this.indexY+1
			            },
			            {
			                source: 1,
			                target: this.indexY+1
			            },
		        	 )
//   				 event.target.appendChild(this.dom);
					computedDataSearch(this);
		        },
		        dealDrop(){/*处理放下的逻辑*/
					this.serviceItem.push(this.item);
		        	
		        	 this.optionDiy.series[0].data.push(
		        	 	{
				                name: this.item.name,
				                x: 200,
				                y: (this.indexY++)*50,
				                value: this.item.id,
				                symbol: 'roundRect',
				                symbolSize: [120, 30],
				        },
		        	 )
		        	 this.optionDiy.series[0].links.push(
		        	 	{
			                source: 0,
			                target: this.indexY+1
			            },
			            {
			                source: 1,
			                target: this.indexY+1
			            },
		        	 )
//   				 event.target.appendChild(this.dom);
					computedDataSearch(this);
		        },
		        allowDrop(ev){/**/
		        	   ev.preventDefault();
		        },
		        resetData(){
		        	Object.assign(this.$data, this.$options.data())/*重置data数据*/
		        	computedGroupSearch2(this);
		        },
		        clickEcharts(param){
		        	console.log(param);
		        },
		        chooseOutput(val){/*选中这个输出参数，增加一行*/
		        	console.log(val);
			        	this.OutPutTableData = []
			        	for (let i = 0; i < val.length; i++) {
			        		this.OutPutTableData.push(
		        				{
			          				type:'1',
			          				name:"",
			          				val:'',
			          				mentname:val[i].name,
			          				fieldJoinStr:'',
			          				id:val[i].id
		          				}
	        				)	      	
			        	}
		        },
		        submitZuheForm(val){
		        	console.log(val);
		        	this.OutPutTableDataZuhe.push(
		        				{
			          				type:'2',
			          				name:"",
			          				val:'',
			          				mentname:val.checkListSort,
			          				fieldJoinStr:val.fieldJoinStr,
			          				id:''
		          				}
	        		)	
	        		this.dialogVisible1 = false;
	        		
		        },
		        dealData(){/*处理数据，插回去*/
		   			if(this.choreDetailForm2.smGroupOutputFieldViewVos!=''){
			        	let dealI = [];
			        	for(let i =0;i<this.dragItem.length;i++){
			        		for(let k=0;k<this.choreDetailForm2.smGroupResourceServices.length;k++){
			        			if(this.dragItem[i].id==this.choreDetailForm2.smGroupResourceServices[k].resourceServiceId){
	//		        				this.serviceItem.push(this.dragItem[i])
	//		        				this.dragItem.splice(i,1);
									this.item = this.dragItem[i]
									this.index = i
									this.dealDrop()
									dealI.push(i);
									
			        			}
			        		}
			        	}
			        	for(let i =0;i<dealI.length;i++){
			        		this.dragItem.splice(dealI[i],1);
			        	}

		       	 	}
		        },
		        dealOutPut(){/*处理输入输出*/
		       			this.length =this.length +1;
		       			if(this.length==2){
		       				console.log(this.choreDetailForm2.smGroupOutputFieldViewVos)
				        	console.log(this.outputs)
				        	for(let i in this.choreDetailForm2.smGroupOutputFieldViewVos){
				        		if(this.choreDetailForm2.smGroupOutputFieldViewVos[i].outputDataFormId==null){
								    this.OutPutTableDataZuhe.push(
						        				{
							          				type:'2',
							          				name:this.choreDetailForm2.smGroupOutputFieldViewVos[i].name,
							          				val:'',
							          				mentname:this.choreDetailForm2.smGroupOutputFieldViewVos[i].outputDataFormIds,
							          				fieldJoinStr:this.choreDetailForm2.smGroupOutputFieldViewVos[i].fieldJoinStr,
							          				id:''
						          				}
					        		)	
				        		}else{
						        	this.OutPutTableData.push(
				        				{
					          				type:'1',
					          				name:this.choreDetailForm2.smGroupOutputFieldViewVos[i].name,
					          				val:'',
					          				mentname:this.choreDetailForm2.smGroupOutputFieldViewVos[i].outputDataFormId,
					          				fieldJoinStr:'',
					          				id:this.choreDetailForm2.smGroupOutputFieldViewVos[i].outputDataFormId,
				          				}
			        				)
				        		}
				        	}
		       			}

		        }
        },
        mounted(){
			if(this.lastForm.hasOwnProperty('name9')){
				computedGroupSearch2(this);
			}
        	
        },
        watch:{
        	lastForm:{
        		handler(newVal){
        				if(this.lastForm.hasOwnProperty('name9')){
        					computedGroupSearch2(this);
        				}
        		},
        		deep:true	
        	},
        	choreDetailZuheForm:{
        		handler(newVal){
        				
        		},
        		deep:true	
        	}
        }
  };
</script>

<style scoped="scoped">
	.edit_middele{
		cursor: pointer;
    	vertical-align: -webkit-baseline-middle;
	}
	
	.add_out_put{
		font-size: 12px;
		color: #2576C5;
		padding-left: 11px;
		cursor: pointer;
	}
	p.step_p {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #bbe5f954;
    width: 100%;
    text-align: right;
    padding: 10px 40px;
}
	p.chore_detail_title {
    padding-left: 20px;
    font-size: 13px;
    margin-bottom: 5px;
}
	span.chore_detail_span {
    width: 33%;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 14px;
    color: #9c9898;
}
	.service_item img {
	    position: absolute;
	    top: 48px;
	    left: 85px;
	    width: 35px;
	}
	#leftContainer .service_item{
		cursor:move;
	}
	
	.service_item {
	
    text-align: center;
    border: solid 1px #bfb9b9;
    width: 200px;
    margin: 15px auto;
    border-radius: 62px;
    padding: 15px;
    font-size: 14px;
    position: relative;
    top: 0px;
    left: 0;
}
#mainContainer .service_item{
		 margin: 28px auto;
		 cursor: pointer;
		 border: solid 1px #2576C5;
		 color: #2576C5;
	}
	
#mainContainer .mainContainer_hidden{
	display: none;
}
.chore_detail_p {
    font-size: 14px;
    padding: 15px;
    font-weight: 600;
}
.chore_detail_zuhe{
	margin-top: 10px;
	background: #fff;
	box-sizing: border-box;
	height: calc(100% - 47px);
    padding-bottom: 40px;
}
#main {
 float: left;
 width: 100%;
 height: 100%;
}
#mainContainer {
 margin: 0 460px 0 390px;
 height: 100%;
 overflow-y: scroll;
 /*background: green;*/
}
#left {
 float: left;
 margin-left: -100%;/*这个是一个页面的宽度*/
 width: 390px;
 height: 100%;
 overflow-y: scroll;
} 
#right {
 float: left;
 margin-left: -460px;/*这个是这个长度，因为在第三个左浮，所以就是负去自身宽度，就是刚好排到第三个。*/
 width: 460px;
  height: 100%;
  margin-bottom: 60px;
  overflow-y: scroll;
} 
#left .inner,
#right .inner {
 /*background: orange;*/
 /*margin: 0 10px;*/
 height: 100%;
}
#left .inner{
	border-right: solid 1px #E0E0DD;
}
#right .inner{
	border-left: solid 1px #E0E0DD;
}

  	.box_checkbox{
    	margin: 5px !important;
    	border-left: solid 1px #E0E4E7;
    }
    .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    #right .title{
    	margin: 10px 0;
	    font-size: 15px;
	    font-weight: 600;
	    padding-left: 15px;
    }
</style>